<template>
  <s-layout class="set-wrap" :title="state.title" :bgStyle="{ color: '#f7f7f7' }">
    <!-- <s-empty v-if="state.list.length === 0 && !state.loading" text="暂无常见问题" icon="/static/collect-empty.png" /> -->
    <!-- {{ state.status }} -->
    <view class="flex flex-col px-4 bg-white">
      <u-alert type="error" v-if="state.status === 0" title="审核中，请耐心等待" />
      <u-alert type="error" v-if="state.status === 1" title="审核通过" />
      <u-alert type="error" v-if="state.status === 2" title="审核未通过" :description="state.msg" />
      <view class="flex overflow-hidden flex-col bg-white rounded-lg">
        <view class="flex gap-7 items-center py-2">
          <view class="text-[15px] text-[#333333] flex-none"> 门店名称 </view>
          <uni-easyinput
            v-model="state.name"
            type="text"
            placeholder="请填写门店名称"
            :inputBorder="false"
            maxlength="10"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          />
        </view>
      </view>
      <u-line></u-line>
      <view class="flex relative gap-7 items-center py-2">
        <view class="size-full absolute inset-0 z-50" @tap="handleSelectType"></view>
        <view class="text-[15px] text-[#333333] flex-none"> 门店分类 </view>
        <uni-easyinput
          v-model="state.type_name"
          type="text"
          placeholder="请选择门店分类"
          :inputBorder="false"
          disabled
          placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          :styles="{ disableColor: '#fff', color: '#333' }"
        >
          <template #right>
            <u-icon name="arrow-right"></u-icon>
          </template>
        </uni-easyinput>
      </view>
      <u-line></u-line>

      <view class="flex relative gap-7 items-center py-2">
        <view class="size-full absolute inset-0 z-50" @tap="handleSelectArea"></view>
        <view class="text-[15px] text-[#333333] flex-none"> 所属地区 </view>
        <uni-easyinput
          v-model="state.address_address"
          type="text"
          placeholder="请选择所属地区"
          :inputBorder="false"
          disabled
          placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          :styles="{ disableColor: '#fff', color: '#333' }"
        >
          <template #right>
            <u-icon name="arrow-right"></u-icon>
          </template>
        </uni-easyinput>
      </view>
      <u-line></u-line>

      <view class="flex relative gap-7 items-center py-2">
        <view class="size-full absolute inset-0 z-50" @tap="openTheMap"></view>
        <view class="text-[15px] text-[#333333] flex-none"> 详细地址 </view>
        <uni-easyinput
          v-model="state.address"
          type="text"
          placeholder="请选择详细地址"
          :inputBorder="false"
          disabled
          placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          :styles="{ disableColor: '#fff', color: '#333' }"
        >
          <template #right>
            <u-icon name="arrow-right"></u-icon>
          </template>
        </uni-easyinput>
      </view>
      <u-line></u-line>

      <view class="flex gap-7 items-center py-2">
        <view class="text-[15px] text-[#333333] flex-none"> 联系电话 </view>
        <uni-easyinput
          v-model="state.mobile"
          type="number"
          placeholder="请填写联系电话"
          :inputBorder="false"
          placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
        />
      </view>
      <u-line></u-line>

      <view class="flex gap-7 items-start py-2">
        <view class="text-[15px] text-[#333333] flex-none py-2"> 门店介绍 </view>
        <uni-easyinput
          v-model="state.brief"
          type="textarea"
          placeholder="请填写门店介绍"
          :inputBorder="false"
          placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
        />
      </view>
      <u-line></u-line>
      <view class="flex flex-col gap-4 py-4 pb-0">
        <view class="text-[15px] text-[#333333] flex-none"> 门头照 </view>
        <s-uploader
          v-model:url="state.image"
          fileMediatype="image"
          limit="1"
          mode="grid"
          :imageStyles="{ width: '168rpx', height: '168rpx' }"
        ></s-uploader>
      </view>
      <view class="flex flex-col gap-4 py-4 pb-0">
        <view class="text-[15px] text-[#333333] flex-none"> 营业执照 </view>
        <s-uploader
          v-model:url="state.license_image"
          fileMediatype="image"
          limit="1"
          mode="grid"
          :imageStyles="{ width: '168rpx', height: '168rpx' }"
        ></s-uploader>
      </view>
      <view class="flex flex-col gap-4 py-4 pb-0">
        <view class="text-[15px] text-[#333333] flex-none"> 法定代表人身份证信息 </view>
        <view class="flex gap-4 items-center">
          <s-uploader
            v-model:url="state.frcar_aimage"
            fileMediatype="image"
            limit="1"
            mode="grid"
            :imageStyles="{ width: '168rpx', height: '168rpx' }"
          ></s-uploader>
          <s-uploader
            v-model:url="state.frcar_bimage"
            fileMediatype="image"
            limit="1"
            mode="grid"
            :imageStyles="{ width: '168rpx', height: '168rpx' }"
          ></s-uploader>
        </view>
      </view>
      <view class="flex flex-col gap-4 py-4 pb-0">
        <view class="text-[15px] text-[#333333] flex-none"> * 门店/店铺室内（可上传多张） </view>
        <s-uploader
          v-model:url="state.images"
          fileMediatype="image"
          limit="6"
          mode="grid"
          :imageStyles="{ width: '168rpx', height: '168rpx' }"
        ></s-uploader>
      </view>

      <view class="flex flex-col gap-4 py-4 pb-0">
        <view class="text-[15px] text-[#333333] flex-none"> * 店铺/产品视频（可上传多个，每个视频不能超过3分钟）</view>
        <!-- <view class="text-[15px] text-[#333333] flex-none"> * 门店/店铺室内（可上传多张） </view> -->
        <s-uploader
          v-model:url="state.videos"
          fileMediatype="video"
          limit="3"
          mode="grid"
          :imageStyles="{ width: '168rpx', height: '168rpx' }"
        ></s-uploader>
      </view>
      <view class="flex items-center py-4">
        <u-checkbox-group @change="checkboxGroupChange">
          <u-checkbox v-model="state.checked" shape="circle">明月</u-checkbox>
        </u-checkbox-group>
        <view class="text-[.8125rem] text-[#616161] flex items-center">
          我已阅读并同意相关条款
          <view class="text-[#FF1515]" @click="toUserAgreement"> 《入驻门店》 </view>
        </view>
      </view>
    </view>
    <view class="py-5"></view>
    <view class="fixed right-0 bottom-0 left-0 p-4 bg-white z-[9999]">
      <!-- {{ state.status === 0 ? '审核中' : state.status === 1 ? '审核通过' : '重新提交' }} -->
      <!--  -->
      <!-- <u-alert type="error" v-if="state.status === 0" title="审核中，请耐心等待" />
      <u-alert type="error" v-if="state.status === 1" title="审核通过" />
      <u-alert type="error" v-if="state.status === 2" title="审核未通过" :description="state.msg" /> -->
      <view
        class="grid overflow-hidden place-items-center py-3 w-full rounded-lg"
        :class="[state.status === 0 ? 'bg-[#0788C8]' : state.status === 1 ? 'bg-[#0788C8]' : 'bg-[#0788C8] cursor-pointer']"
        @click="state.status === 2 || state.status === -1 || state.status === 1 ? submit() : ''"
      >
        <view class="font-medium text-[16px] text-[#FFFFFF]" v-if="state.status == -1"> 提交 </view>
        <view class="font-medium text-[16px] text-[#FFFFFF]" v-if="state.status == 0"> 审核中 </view>
        <view class="font-medium text-[16px] text-[#FFFFFF]" v-if="state.status == 1"> 重新修改 </view>
        <view class="font-medium text-[16px] text-[#FFFFFF]" v-if="state.status == 2"> 重新修改 </view>
      </view>
    </view>
    <!--  -->
    <!--  -->
    <!--  -->
    <su-region-picker :show="state.regionShow" @cancel="state.regionShow = false" @confirm="onRegionConfirm"> </su-region-picker>
    <!-- 门店分类 -->
    <!-- 门店分类 -->
    <!-- 门店分类 -->
    <u-picker
      :show="state.showCategory"
      :columns="[state.classificationList]"
      keyName="name"
      @confirm="onConfirm"
      @cancel="state.showCategory = false"
    >
    </u-picker>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';

  const state = ref({
    title: '',
    regionShow: false,
    list: [],
    loading: true,
    list: [],
    loading: true,
    name: '', // 店铺名称
    image: '', // 门头照
    type_id: '', // 门店分类
    type_name: '', //门店分类名称
    mobile: '', // 联系电话
    province: '', // 省份
    city: '', // 城市
    district: '', // 区
    address: '', // 详细地址
    lat: '', // 纬度
    lng: '', // 经度
    brief: '', // 门店简介
    license_image: '', // 营业执照

    frcar_aimage: '', // 法人身份证照-正面
    frcar_bimage: '', // 法人身份证照-反面
    images: '', // 相册
    videos: '', // 视频
    checked: false, // 同意协议
    address_address: '',

    classificationList: [], // 分类列表
    showCategory: false,
    //----------------
    status: -1,
    msg: '',
    options: {},
  });

  onLoad((options) => {
    //入驻门店
    if (options.title) {
      state.value.title = '门店管理';
    } else {
      state.value.title = '入驻门店';
    }
    // console.log('🚀 ~ options:', options);
    // state.value.options = options;
    typeList();
  });

  function typeList(params) {
    let obj = {};
    sheep.$api.yy.typeList(obj).then((res) => {
      state.value.classificationList = res.data;
      console.log('state.value.classificationList==> ', state.value.classificationList);
      // if (state.value.options.id) {
      // }
      myApply();
    });
  }

  function myApply() {
    sheep.$api.yy.myApply().then((res) => {
      console.log('🚀 ~ myApply ~ res:', res);
      if (res.code === 1) {
        if (!res.data || Object.keys(res.data).length === 0) {
          return;
        }

        state.value.name = res.data.name || '';
        state.value.image = res.data.image || '';
        state.value.type_id = res.data.type_id || '';
        state.value.mobile = res.data.mobile || '';
        state.value.province = res.data.province || '';
        state.value.city = res.data.city || '';
        state.value.district = res.data.district || '';
        state.value.address = res.data.address || '';
        state.value.lat = res.data.lat || '';
        state.value.lng = res.data.lng || '';
        state.value.license_image = res.data.license_image || '';
        state.value.brief = res.data.brief || '';
        state.value.frcar_aimage = res.data.frcar_aimage || '';
        state.value.frcar_bimage = res.data.frcar_bimage || '';
        state.value.images = res.data.images || [];
        state.value.videos = res.data.videos || [];
        state.value.status = res.data.status || 0;
        state.value.msg = res.data.msg || 0;
        state.value.address_address = (res.data.province || '') + (res.data.city || '') + (res.data.district || '');

        if (res.data.type_id) {
          const typeItem = state.value.classificationList.find((item) => item.id === res.data.type_id);
          state.value.type_name = typeItem ? typeItem.name : '';
        }
      }
    });
  }

  function openTheMap() {
    uni.chooseLocation({
      success: (res) => {
        console.log(res);
        state.value.address = res.address;
        state.value.lat = res.latitude;
        state.value.lng = res.longitude;
        // state.province = res.province;
        // state.city = res.city;
      },
    });
  }

  function submit() {
    console.log('state.value.videos==> ', state.value.videos);
    let obj = {
      name: state.value.name, // 店铺名称
      image: state.value.image, // 门头照
      type_id: state.value.type_id, // 分类ID
      mobile: state.value.mobile, // 联系电话
      province: state.value.province, // 省份
      city: state.value.city, // 城市
      district: state.value.district, // 区
      address: state.value.address, // 详细地址
      lat: state.value.lat, // 纬度
      lng: state.value.lng, // 经度
      license_image: state.value.license_image, // 营业执照图片
      brief: state.value.brief, // 门店简介
      frcar_aimage: state.value.frcar_aimage, // 法人身份证正面照片
      frcar_bimage: state.value.frcar_bimage, // 法人身份证反面照片
      images: state.value.images, // 相册
      videos: state.value.videos, // 视频
    };
    sheep.$api.yy.applyStore(obj).then((res) => {
      if (res.code === 1) {
        uni.showToast({
          title: '提交成功',
          icon: 'none',
        });
        // uni.navigateBack({
        //   delta: 1,
        // });
      }
    });
    // TODO: 提交表单逻辑
  }

  function checkboxGroupChange() {
    state.value.checked = !state.value.checked;
  }
  // 品牌入驻
  function toUserAgreement() {
    uni.navigateTo({
      url: '/pages/public/richtext?id=8&title=入驻门店',
    });
  }

  function handleSelectArea() {
    console.log('11==> ', 11);
    state.value.regionShow = true;
  }

  function onRegionConfirm({ province_name, city_name, district_name }) {
    state.value.province = province_name;
    state.value.city = city_name;
    state.value.district = district_name;
    state.value.address_address = province_name + city_name + district_name;
    state.value.regionShow = false;
  }

  function handleSelectType() {
    state.value.showCategory = true;
  }

  function onConfirm(e) {
    console.log('e==> ', e.value[0]);
    state.value.type_id = e.value[0].id;
    state.value.showCategory = false;
    state.value.type_name = e.value[0].name;
  }
</script>

<style lang="scss" scoped>
  :deep() {
    .uni-forms-item__label .label-text {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
    }

    .uni-easyinput__content-input {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
      padding-left: 0 !important;
    }

    .uni-easyinput__content-textarea {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
      margin-top: 8rpx !important;
    }

    .uni-icons {
      font-size: 40rpx !important;
    }

    .is-textarea-icon {
      margin-top: 22rpx;
    }

    .is-disabled {
      color: #333333;
    }
  }
</style>
